<template>
  <div v-loading.lock="loading" class="base-content">
    <div class="basic-info">
      <div class="base-content-operate">
        <el-button icon="el-icon-plus" type="primary" @click="onNew"
          >新增</el-button
        >
      </div>
      <el-table
        :data="list"
        element-loading-text="Loading"
        fit
        highlight-current-row
        class="filter unsetborder"
        :class="{ 'show-filter': showFilterRow }"
      >
        <el-table-column align="center" width="50">
          <template #header>
            <div class="filter-icon" title="筛选">
              <SvgIcon
                class-name="filter"
                icon-class="filter"
                @click="filterIconClick"
              />
            </div>
          </template>
          <el-table-column width="50"></el-table-column>
        </el-table-column>
        <el-table-column label="消息类型">
          <el-table-column prop="messageTypeName">
            <template #header>
              <el-input
                v-if="showFilterRow"
                v-model="queryForm.messageTypeName"
                @keyup.enter.native="getList"
              ></el-input>
            </template>
            <template slot-scope="scope">
              {{ scope.row.messageTypeName }}
            </template>
          </el-table-column>
        </el-table-column>
        <el-table-column label="订阅者类型">
          <el-table-column prop="subscribeType">
            <template slot-scope="scope">
              {{ subscribeTypeName(scope.row.subscribeType) }}
            </template>
          </el-table-column>
        </el-table-column>
        <el-table-column label="订阅者">
          <el-table-column prop="subscriberName">
            <template #header>
              <el-input
                v-if="showFilterRow"
                v-model="queryForm.subscriberName"
                @keyup.enter.native="getList"
              ></el-input>
            </template>
            <template slot-scope="scope">
              {{ scope.row.subscriberName }}
            </template>
          </el-table-column>
        </el-table-column>

        <el-table-column label="状态">
          <el-table-column prop="status">
            <template #header>
              <el-select
                v-if="showFilterRow"
                v-model="queryForm.status"
                width="150px"
              >
                <el-option
                  v-for="item in statusList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </template>
            <template slot-scope="scope">
              {{ statusName(scope.row.status) }}
            </template>
          </el-table-column>
        </el-table-column>
        <el-table-column label="操作时间">
          <el-table-column prop="entrustTaskNum">
            <template slot-scope="scope">
              {{ formatTime(scope.row.createTime) }}
            </template>
          </el-table-column>
        </el-table-column>
        <el-table-column label="操作">
          <el-table-column width="140">
            <template #header>
              <div v-if="showFilterRow" class="search-operate">
                <el-link type="primary" @click="getList(true)">搜索</el-link>
                <el-link @click="cancelForm">清空</el-link>
              </div>
            </template>
            <template slot-scope="scope">
              <div class="base-table-operation">
                <el-link type="primary" @click="toEdit(scope.row)"
                  >编辑</el-link
                >
                <el-link type="danger" @click="toDel(scope.row)">删除</el-link>
              </div>
            </template>
          </el-table-column>
        </el-table-column>
      </el-table>

      <BasePagination
        :total="pagination.total"
        :current-page="pagination.pageIndex"
        :page-count="pagination.total"
        @changePage="changePage"
        @sizeChange="sizeChange"
      />
    </div>

    <MessageSubscribeAdd
      v-if="dialogFormAddVisible"
      ref="MessageSubscribeAdd"
      :dialog-form-visible.sync="dialogFormAddVisible"
      @getList="getList"
    />

    <MessageSubscribeEdit
      v-if="dialogFormEditVisible"
      :id="editId"
      ref="MessageSubscribeEdit"
      :dialog-form-visible.sync="dialogFormEditVisible"
      @getList="getList"
    />
  </div>
</template>

<script>
import MessageSubscribeAdd from "./MessageSubscribeAdd.vue";
import MessageSubscribeEdit from "./MessageSubscribeEdit.vue";
import {
  getList,
  deleteRecord,
} from "../../../api/Message/MessageSubscribe.js";
import { formatTime } from "../../../utils/time";
export default {
  name: "MessageSubscribeList",
  components: { MessageSubscribeAdd, MessageSubscribeEdit },
  data() {
    return {
      loading: true,
      list: [],
      editId: 0,
      showFilterRow: false,
      dialogFormAddVisible: false,
      dialogFormEditVisible: false,
      subscribeTypeList: [
        {
          label: "全部",
          value: 10,
        },
        {
          label: "用户",
          value: 20,
        },
        {
          label: "用户组",
          value: 30,
        },
      ],
      statusList: [
        {
          label: "全部",
          value: -1,
        },
        {
          label: "启用",
          value: 1,
        },
        {
          label: "禁用",
          value: 0,
        },
      ],
      queryForm: {
        messageTypeName: "",
        subscriberName: "",
        status: -1,
      },
      pagination: {
        pageIndex: 1,
        pageSize: 10,
        total: 0,
      },
    };
  },
  created() {
    this.getList();
  },
  methods: {
    formatTime,
    filterIconClick() {
      this.showFilterRow = !this.showFilterRow;
      !this.showFilterRow && this.cancelForm();
    },
    changePage(val) {
      this.pagination.pageIndex = val;
      this.getList();
    },
    sizeChange(val) {
      this.pagination.pageIndex = 1;
      this.pagination.pageSize = val;
      this.getList();
    },
    statusName(item) {
      var result = this.Helper.EachArrayFindItem(
        this.statusList,
        "value",
        item
      ).label;
      return result;
    },
    subscribeTypeName(item) {
      var result = this.Helper.EachArrayFindItem(
        this.subscribeTypeList,
        "value",
        item
      ).label;
      return result;
    },
    // 清空筛选条件
    cancelForm() {
      this.queryForm = this.$options.data().queryForm;
      this.getList();
    },
    toEdit(row) {
      this.editId = row.id;
      this.dialogFormEditVisible = true;
    },
    toDel(row) {
      deleteRecord({ id: row.id })
        .then((res) => {
          this.getList();
        })
        .catch((res) => {});
    },
    onNew() {
      this.dialogFormAddVisible = true;
    },
    getList() {
      this.loading = true;
      this.list = [];
      getList(this.queryForm, this.pagination)
        .then((res) => {
          if (res.data.dataList) {
            this.list = res.data.dataList;
            this.pagination.total = res.data.total;
          } else {
            this.pagination.total = 0;
          }
          this.loading = false;
        })
        .catch(() => {
          this.loading = false;
        });
    },
  },
};
</script>

<style scoped>
.unread {
  text-align: center;
  color: #ffffff;
  width: 47px;
  height: 17px;
  background: #3e9cf3;
  border-radius: 9px;
  font-size: 10px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  line-height: 14px;
}
.read {
  text-align: center;
  color: #ffffff;
  width: 47px;
  height: 17px;
  background: #acb0b8;
  border-radius: 9px;
  font-size: 10px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  line-height: 14px;
}
.viewDetail {
  color: #1890ff;
}
</style>
